<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>UI控件</title>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
  
   <link type="text/css" href="../../demos.css" rel="stylesheet" />
    <script type="text/javascript" src="../../../scripts/jquery.js"></script>
    
   <script language="javascript" src="../../load_control_xml.js"></script>
   <script type="text/javascript" src="../../syntaxhighlighter/viewsource.js"></script>

	<style type="text/css">
		.current{
			background:#ADD4FF;
			color:#000;
			font-weight: bold;
		}

	</style>
	
	<script>
	  function viewUIComponentDetail(url,demo_title){
		  document.getElementById('demo-iframe').src = url;
		  $('#demo_title').get(0).innerHTML = "<h2>示例：" + demo_title + "</h2>";
		  $('#pagesource_div').hide();
		  $('#viewsourceId').show() ;
		  $('#hidesourceId').hide() ;
	  }

	//获取xml文档内容
	var uiDemo = loadControlConfig('demo.xml') ;
	$( function(){
		var html = [] ;
		
		html.push("<h2><span style='padding-left:2px'>控件示例</span></h2>") ;
		
		if(uiDemo.categorys){
			for( var i = 0;i < uiDemo.categorys.length;i ++ ){
				var category = uiDemo.categorys[i];
				
				if(category.name != null){
					html.push("<ul style='padding-left:2px'><li><b><<"+category.name+"</b></li></ul>") ;
				}
				
				html.push("<ul class='navigation'>");
				
				for( var j = 0;j < category.demos.length;j ++ ){
					var demo = category.demos[j];
					html.push('<li url=' + demo.url + ' name=' + demo.name + '><a href="javascript:void(0);"><font style="padding-left: 4px">'+demo.name+'</font></a></li>') ;
				}
				html.push("</ul>") ;
			}
		}
		
		$('#submenu').html( html.join('') ) ;
		
		$('#submenu .navigation li').click(
			function(){
				var me = $(this) ;
				viewUIComponentDetail( me.attr('url'),me.attr('name') ) ;
				$('#submenu .navigation li,.submenu h3').removeClass('current current-h3') ;
				me.addClass('current') ;
			}
		) ;
		
		$('#submenu .navigation li').first().click() ;
	} ) ;
		
	
	</script>

</head>
<body id="master">
	<table width="100%" style="height: 500px;" border="0">
		<tr>
			<td width="77%" style="vertical-align: top;">
				<div id="demo_title" style="margin: 10px"></div>
				<iframe src="" width="100%" height="330px" frameborder="0" scrolling="yes" id="demo-iframe"></iframe>
				<div class="demo-source" style="margin: 10px"/>
			</td>
			<td width="23%" style="vertical-align: top;background-color: #E7F1FD">
			   <div class="demos-nav">
	                <div id="submenu">
	
	                </div>
	           </div>
			</td>
		</tr>
	</table>
	
</body>
</html>
